<template>
  <div v-if="dialogVisible" class="dialog-model">
    <div class="dialog-content">
      <div class="dialog-title">
        <div>{{ title }}</div>
        <div class="close-icon" @click="close">x</div>
      </div>
      <div class="dialog-body">
        <div class="detail-item">
          <span class="detail-name">手机：</span>
          <span class="detail-value">
            <input
              v-model="detail.phone"
              class="number-input"
              type="text"
              placeholder="请输入手机号码"
              :disabled="type === 'edit'"
            />
          </span>
        </div>
        <div class="detail-item">
          <span class="detail-name">姓名：</span>
          <span class="detail-value">
            <input
              v-model="detail.name"
              class="number-input"
              type="text"
              placeholder="请输入会员姓名"
              :disabled="type === 'edit'"
            />
          </span>
        </div>
        <div class="detail-item">
          <span class="detail-name">余额：</span>
          <span class="detail-value">
            <input
              v-model="detail.balance"
              class="number-input"
              type="text"
              disabled
            />
          </span>
        </div>
        <div class="detail-item">
          <span class="detail-name">类型：</span>
          <span class="detail-value">
            <label> 
              <input type="radio" v-model="detail.direction" :value="2" name="direction" :disabled="type === 'add'" />
              消费
            </label>
            <label>
              <input type="radio" v-model="detail.direction" :value="1" name="direction" :disabled="type === 'add'" />
              充值
            </label>
          </span>
        </div>
        <div class="detail-item">
          <span class="detail-name">金额：</span>
          <span class="detail-value">
            <input
              v-model="detail.amount"
              class="number-input"
              type="text"
              :placeholder="'请输入' + (detail.type == 1 ? '充值' : '消费') + '金额'"
            />
          </span>
        </div>
      </div>
      <div class="dialog-footer">
        <button @click="close">取消</button>
        <button @click="submit">确定</button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Provide, Prop, Vue } from 'vue-property-decorator'

@Component
export default class Dialog extends Vue {
  @Prop({ default: '资金划转' })
  title: string | undefined
  @Prop()
  dialogVisible: boolean | undefined
  @Prop({ default: {} })
  detail: object | undefined
  @Prop({default: 'edit'})
  type: string | undefined

  @Provide()
  showError: boolean = false

  close() {
    this.$emit('update:dialogVisible', false)
  }

  submit() {
    this.$emit('submit')
  }
}
</script>
<style lang="scss" scoped>
.error-text {
  position: absolute;
  left: 0;
  bottom: -6px;
  line-height: 0;
  color: red;
  font-size: 12px;
}

.dialog-model {
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.3);

  .dialog-content {
    position: absolute;
    width: 360px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -70%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #666;

    .dialog-title {
      height: 40px;
      padding: 0 10px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      box-shadow: 0 0 3px 0 rgba($color: #000000, $alpha: 0.5);

      .close-icon {
        padding: 0 10px;
        cursor: pointer;
      }
    }

    .dialog-body {
      flex: 1;
      padding: 10px;
      overflow-y: auto;

      .detail-item {
        display: flex;
        line-height: 40px;
        padding: 5px;

        .detail-name {
          width: 80px;
          text-align: right;
        }

        .detail-value {
          flex: 1;
          position: relative;
          text-align: left;
          color: #666;

          label {
            float: left;
            margin-right: 20px;
          }

          .number-input {
            border-color: #ddd;
            height: 34px;
            line-height: 32px;
          }
        }
      }
    }

    .dialog-footer {
      height: 50px;
      padding: 10px;
      text-align: right;
      border-top: 1px solid #ddd;

      button {
        height: 30px;
        line-height: 30px;
        margin-left: 10px;
      }
    }
  }
}
</style>
